//1.下包并引入路由
import VueRouter from "vue-router";
import Vue from "vue";
/* import Home from "@/pages/Home";
import Login from "@/pages/Login";
import News from "@/pages/Home/News";
import Music from "@/pages/Home/Music";
import Game from "@/pages/Home/Game";
import NotFound from "@/pages/NotFound/404"; */
/* 
  路由懒加载:
    结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载
    - 不再使用import模板化语法引入路由组件
    - 而是定义一个当前组件对应的函数,函数内部异步使用import方法引入组件,并返回promise实例即可
    - 当路由被切换需要加载当前路由的时候,就会调用当前函数
*/

const Home = () => "@/pages/Home";
const Login = () => "@/pages/Login";
const News = () => "@/pages/Home/News";
const Music = () => "@/pages/Home/Music";
const Game = () => "@/pages/Home/Game";
const NotFound = () => "@/pages/NotFound/404";

//2.应用路由插件(比如注册一些router提供的全局组件等等...)
Vue.use(VueRouter);

//3.创建路由器对象，并在内部配置模式和路由表
const router = new VueRouter({
    mode: "history",
    routes: [
        {
            path: "/",
            redirect: "/Home",
        },
        /* 每一个对象都是一个路由规则,我们可以给路由规则一个名字,方便后边使用 */
        {
            path: "/Home",
            component: Home,
            /* 如果某个路由拥有了默认子路由,我们一般不会在这个路由规则上命名 */
            // name: "Home",
            //二级路由配置
            children: [
                {
                    /* 
                二级路由的路径可以直接书写二级路由的路由名称即可,不用书写完整的地址
                但是不能写 /+当前路由地址!!!!!!!!!!!!
                */
                    path: "News",
                    component: News,
                    name: "News",
                },
                {
                    path: "Music",
                    component: Music,
                    name: "Music",
                },
                {
                    path: "Game",
                    component: Game,
                    name: "Game",
                },
                /* 默认子路由写法1:重定向推荐写法 */
                {
                    path: "",
                    redirect: "News",
                },
                /* 默认子路由写法2:直接定向设置组件写法 */
                /* {
                path: "",
                component: News,
                }, */
            ],
        },
        {
            path: "/Login",
            component: Login,
            name: "Login",
        },

        // 404配置卸载最下边
        {
            path: "/*",
            component: NotFound,
        },
    ],
});

//4.暴露router，注入到vue实例中
export default router;
